<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=utf-8");
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>register</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.login.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Logo & Information Panel-->
                <div class="col-lg-6">
                    <div class="info d-flex align-items-center">
                        <div class="content">
                            <div class="logo">
                                <h1>欢迎注册</h1>
                            </div>
                            <p>XXXX管理系统</p>
                        </div>
                    </div>
                </div>
                <!-- Form Panel    -->
                <div class="col-lg-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <div class="form-group">
                                <input id="register-email" class="input-material" type="text"
                                       name="registerEmail" placeholder="请输入电子邮箱地址">
                                <div class="invalid-feedback">
                                    邮箱地址必须包含@和.
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-username" class="input-material" type="text"
                                       name="registerUsername" placeholder="请输入用户名/姓名">
                                <div class="invalid-feedback">
                                    用户名必须在2~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-password" class="input-material" type="password"
                                       name="registerPassword" placeholder="请输入密码">
                                <div class="invalid-feedback">
                                    密码必须在6~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="register-passwords" class="input-material" type="password"
                                       name="registerPasswords" placeholder="确认密码">
                                <div class="invalid-feedback">
                                    两次密码必须相同 且在6~10位之间
                                </div>
                            </div>
                            <div class="form-group">
                                <button id="regbtn" type="button" name="registerSubmit"
                                        class="btn btn-primary">注册</button>
                            </div>
                            <small>已有账号?</small><a href="login.jsp" class="signup">&nbsp;登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script>
    $(function() {
        /*错误class  form-control is-invalid
        正确class  form-control is-valid*/
        var flagName = false;
        var flagPas = false;
        var flagPass = false;
        var flagEmail = false;
        /*验证邮箱*/
        var email;
        $("#register-email").change(function() {
            email = $("#register-email").val();
            var reg = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/;
            if (!reg.test(email)) {
                $("#register-email").removeClass("form-control is-valid");
                $("#register-email").addClass("form-control is-invalid");
                flagEmail = false;
            } else {
                $("#register-email").removeClass("form-control is-invalid");
                $("#register-email").addClass("form-control is-valid");
                flagEmail = true;
            }
        })
        /*验证用户名*/
        var name, passWord, passWords;
        $("#register-username").change(function() {
            name = $("#register-username").val();
            if (name.length < 2 || name.length > 10) {
                $("#register-username").removeClass("form-control is-valid")
                $("#register-username").addClass("form-control is-invalid");
                flagName = false;
            } else {
                $("#register-username").removeClass("form-control is-invalid")
                $("#register-username").addClass("form-control is-valid");
                flagName = true;
            }
        })
        /*验证密码*/
        $("#register-password").change(function() {
            passWord = $("#register-password").val();
            if (passWord.length < 6 || passWord.length > 18) {
                $("#register-password").removeClass("form-control is-valid")
                $("#register-password").addClass("form-control is-invalid");
                flagPas = false;
            } else {
                $("#register-password").removeClass("form-control is-invalid")
                $("#register-password").addClass("form-control is-valid");
                flagPas = true;
            }
        })
        /*验证确认密码*/
        $("#register-passwords").change(function() {
            passWords = $("#register-passwords").val();
            if ((passWord != passWords) || (passWords.length < 6 || passWords.length > 18)) {
                $("#register-passwords").removeClass("form-control is-valid")
                $("#register-passwords").addClass("form-control is-invalid");
                flagPass = false;
            } else {
                $("#register-passwords").removeClass("form-control is-invalid")
                $("#register-passwords").addClass("form-control is-valid");
                flagPass = true;
            }
        })


        $("#regbtn").click(function() {
            if (flagName && flagPas && flagPass && flagEmail) {
                window.location.href="<%=basePath %>registerServlet?name="+ name + "&email=" + email + "&pasd=" + passWord;
                // localStorage.setItem("name", name);
                // localStorage.setItem("passWord", passWord);
                // location = "login.html"
            } else {
                if (!flagName) {
                    $("#register-username").addClass("form-control is-invalid");
                }
                if (!flagPas) {
                    $("#register-password").addClass("form-control is-invalid");
                }
                if (!flagPass) {
                    $("#register-passwords").addClass("form-control is-invalid");
                }
                if (!flagEmail) {
                    $("#register-email").addClass("form-control is-invalid");
                }
            }
        })
    })
</script>
</body>
</html>